<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>博客详情-爆爆社区</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <style>
        .nav-underline .nav-link {
            padding-top: .75rem;
            padding-bottom: .75rem;
            font-size: .875rem;
            color: #6c757d;
        }
    </style>
</head>
<body style="background: #f2f2f2;">

<!-- 导航栏 -->
<div th:replace="common/header::header(activeUrl='blog')"></div>

<main role="main" class="container mt-3 p-3 bg-white rounded">
    <div class="row">
        <div class="col-md-12 blog-main">
            <div class="blog-post">
                <h2 class="blog-post-title" th:text="${blog.getTitle()}"></h2>
                <p class="blog-post-meta">
                    <span th:text="${#dates.format(blog.getGmtUpdate(),'yyyy-MM-dd HH:mm:ss')}"></span>
                    by
                    <span style="color:#71716999;background: #ffb700c4" class="badge badge-danger"
                          th:text="${blog.getAuthorName()}"></span>
                    <span>
                    <svg t="1610696420189" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="642" width="16" height="16"><path
                            d="M513.1 187c-324 0-448.7 320-448.7 320s127 327.3 448.7 327.3S961.8 507 961.8 507 837.1 187 513.1 187z m0 522.5c-110.5 0-200.1-89.6-200.1-200.1s89.6-200.1 200.1-200.1 200.1 89.6 200.1 200.1-89.6 200.1-200.1 200.1z"
                            p-id="643"></path><path
                            d="M400.7 508.4c0 40.4 21.5 77.6 56.5 97.8 34.9 20.2 78 20.2 113 0 34.9-20.2 56.5-57.5 56.5-97.8 0-62.4-50.6-113-113-113s-113 50.6-113 113z"
                            p-id="644"></path></svg>
                        [[${blog.getViews()}]]
        </span>
                    <!--自己可以删除编辑文章 当然管理员也可以-->
                <div class="float-right"
                     th:if="${(session.loginUser.getUid()==blog.getAuthorId())||session.loginUser.getRoleId()==1}">
                    <a style="color:red" th:href="@{'/blog/delete/'+${session.loginUser.getUid()}+'/'+${blog.getBid()}}"
                       onclick="if(!confirm('确定删除吗?')) return false;">
                        <svg class="bi bi-x-square" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                             xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                  d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                            <path fill-rule="evenodd"
                                  d="M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z"/>
                            <path fill-rule="evenodd"
                                  d="M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z"/>
                        </svg>
                        删除</a>

                    <a style="color:#24b75d" th:href="@{'/blog/edit/'+${session.loginUser.getUid()}+'/'+${blog.getBid()}}">
                        <svg class="bi bi-pencil-square" width="1em" height="1em" viewBox="0 0 16 16"
                             fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
                            <path fill-rule="evenodd"
                                  d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
                        </svg>
                        编辑</a>
                </div>
                </p>
            </div>
            <hr style="margin-top: 18px">
            <div id="doc-content">
                <textarea style="display:none;" placeholder="markdown" th:text="${blog.getContent()}"></textarea>
            </div>
            <div class="col-md-12 blog-main" style="margin-top: 20px">
                <hr>
            </div>

            <div class="col-md-12 blog-main" style="margin-top: 20px;">
                <!--想要保存评论 必须拿到对应的qid 否则都不知道存哪里-->
                <form th:action="@{'/blog/comment/'+${blog.getBid()}}" method="post">
                    <input hidden name="UserId" th:value="${session.loginUser.getUid()}">
                    <input hidden name="UserName" th:value="${session.loginUser.getUsername()}">
                    <input hidden name="UserAvatar" th:value="${session.loginUser.getAvatar()}">
                    <input hidden name="topicId" th:value="${blog.getBid()}">
                    <div class="form-group">
                        <textarea style="border-radius: 10px" name="content" rows="3" required
                                  class="form-control"></textarea>
                    </div>
                    <input type="submit" class="btn btn-block btn-primary float-right" value="提交评论">
                </form>
                <div class="col-md-12 blog-main" style="margin-top: 20px">
                    <hr>
                </div>
            </div>
            <div th:if="${comments.size()==0}" class="col-md-12 blog-main" style="margin-top: 50px">
                <div class="my-3 p-3 bg-white rounded shadow-sm">
                    <h6 class="pb-2 mb-0 text-center">emmm... 这里暂时还没有评论....</h6>
                </div>
            </div>
            <div th:if="${comments.size()!=0}" class="col-md-12 blog-main" style="margin-top: 50px">
                <div class="my-3 p-3 bg-white rounded shadow-sm">
                    <h6 class="border-bottom border-gray pb-2 mb-0"><span style="color:red;">[[${comments.size()}]]</span>个回复</h6>

                    <div th:each="comment:${comments}" class="media text-muted pt-3">
                        <img th:src="${comment.getUserAvatar()}" style="border-radius: 5px;margin-right: 5px "
                             width="32"
                             height="32">
                        <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                            <strong class="d-block text-gray-dark" th:text="${comment.getUserName()}"></strong>
                            <span th:text="${comment.getContent()}"></span>
                            <span th:text="${#dates.format(comment.getGmtCreate(),'yyyy-MM-dd HH:mm:ss')}"
                                  class="badge badge-light float-right"></span>
                        </p>
                    </div>
                </div>
            </div>


        </div>
    </div>
</main>

<div th:replace="common/footer::footer"></div>
<a class="to-top">返回顶部</a>
<th:block th:replace="common/footer::script"></th:block>

<link rel="stylesheet" th:href="@{/editormd/css/editormd.preview.css}"/>
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/editormd/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>

<script type="text/javascript">
    var testEditor;
    $(
        function () {
            testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
                htmlDecode: "style,script,iframe",
                emoji: true,
                taskList: true,
                tocm: true,
                tex: true, // 默认不解析
                flowChart: true, // 默认不解析
                sequenceDiagram: true, // 默认不解析
                codeFold: true
            });
        }
    );

</script>
</body>
</html>